<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类式组件</title>
    <!-- 引入react核心库 -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../React-js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <script type="text/babel">
      // 类总结:
      //  1: 类中的构造方法不是必须写的, 要对实力进行一些初始化操作采写。
      //  2: 如果A类继承B类， 并且A类中写了构造器,  A类构造器必须写super() 方法
      //  3：类中定义的方法, 都是放在类中原型上了, 提供实例去使用
      //  4: 在继承中, 如果子类使用方法没有在子类原型上查找到， 就会通过原型链向父级查找
      // --------------------------------------------------------------------------
      // 创建类组件:   必须继承于React中组件
      // MyComponent 组件实例对象
      // 1：
      class MyComponent extends React.Component {
        // 这个render方法 一定放在MyComponent 类原型对象,  供实例调用。
        // 一定在我们看不见的地方创建了这个实例, 并且这个实例调用了render 方法。
        // render 中的this 是MyComponent 类组件的实例对象,  并且实例实例对象中调用了
        // render 方法 一定是MyComponent 类组件的实例对象调用的。
        render() {
          return <h2>我是用类定义的组件, 适用于复杂组件的定义</h2>;
        }
      }
      // 2：将组件渲染到页面
      ReactDOM.render(<MyComponent />, document.getElementById('test'));

      // 简单组件
      // React 组件使用一个名为render() 的方法, 结束输入的数据并且返回需要输入的数据。
      // 在实例中这种类似XML 组件的写法被称为JSX,  被称为可以通过this.props 在render中访问。
      // 如果我们定义一个类式组件render 方法一定是要有的,  render方法一定是要有返回值.
      // 但是这个返回值就会 VDOM (这个返回值就是虚拟DOM,  就是展示页面)

      // 类式组件的注意:
      //  1: 定义类式组件首字母必须大写
      //  2: 类式组件必须继承React.Component 组件
      //  3：类式组件必须要使用render 函数
      //  4： render函数 必须要有返回值, 返回值的内容就是VDOM (渲染到页面)
      // --------------------------------------------------------------------------
      // 执行了ReactDOM.render(<MyComponent />, document.getELementById('test'))
      // 1: React 解析组件标签, 找到 MyComponent 这个组件
      // 2: 发现组件是使用类定义的,  随后new 出来该类的实例, 并且通过该实例调用原型上的方法。
      // 3：将render 方法返回的虚拟DOM 转化为真实DOM,  随后呈现在页面
    </script>
  </body>
</html>
